<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

    <title>COA文件</title>
</head>

<body>
    <div id="app" ref="rr">
        <el-form ref="form" :model="form" label-width="50px">
            <el-form-item label="货号">
                <el-input v-model="form.name" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="documentCoaId"
                    default-expand-all :tree-props="{children: 'children'}" @selection-change="handleSelectionChange">
                    <!-- <el-table-column type="selection" width="55">
                    </el-table-column> -->
                    <el-table-column prop="lotNo" label="批次">
                        <template scope="{row}">
                            <span v-if="row.type == 4 || row.type == 3">说明书</span>
                            <span v-else>{{row.lotNo}}</span>

                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                        <template slot-scope="scope">
                            <span @click="childFile(scope.row)">
                                {{ scope.row.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button id="downloadID" type="text" size="small" v-if='scope.row.name'
                                @click.native='childFile(scope.row)'>
                                查看
                            </el-button>
                            <el-button id="downloadID" @click.native.prevent="download(scope.$index, scope.row)"
                                type="text" size="small" v-if='scope.row.name' @click='downloadFile(scope.row)'>
                                下载
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {

            return {
                tableData: [],
                code: '',
                datalist: [],
                // baseURL: "http://172.20.10.2:30001",
                baseURL: 'http://service.holmesbio.com/',
                form: {}

            }

        },
        watch: {
            tableData(data) {
            }
        },
        methods: {

            getData(data, _this) {
                const instance = axios.create({
                    baseURL: this.baseURL,
                    timeout: 5000
                })
                instance({
                    method: "POST",
                    url: "/api/eim/document_coa/list_by_code",
                    data: data
                }).then(function (res) {
                    if (res.data.code == 0) {

                    } else {
                        let data = res.data.data
                        let dataInfo = {};
                        data.forEach((item, index) => {
                            let { lotNo } = item;

                            if (!dataInfo[lotNo]) {
                                dataInfo[lotNo] = {
                                    lotNo,
                                    documentCoaId: lotNo,
                                    children: []
                                }
                                    ;
                            }
                            dataInfo[lotNo].children.push(item);
                        });
                        let list = Object.values(dataInfo);
                        _this.tableData = list
                        console.log(list, 'er');
                        _this.form.name = data[0].code
                        _this.$forceUpdate()
                    }
                })
            },
            GetRequest() {
                const url = location.search; //获取url中"?"符后的字串
                let theRequest = new Object();
                let _this = this
                if (url.indexOf("?") != -1) {
                    let str = url.substr(1);
                    strs = str.split("&");
                    for (let i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                this.code = theRequest;
                this.code.isScan = true
                this.getData(this.code, _this)
            },
            download(index, row) {
                console.log(index, row);
            },
            handleSelectionChange(val) {
                console.log(val, 'and');
            },
            downloadFile(row) {
                var ua = navigator.userAgent;
                var isWeixin = !!/MicroMessenger/i.test(ua);
                console.log(isWeixin, 'ssgsgsgsg');
                if (isWeixin) {
                    alert('微信浏览器不支持下载，请使用其他浏览器进行下载')

                } else {
                    const instance = axios.create({
                        baseURL: this.baseURL,
                        timeout: 5000
                    })
                    let data = { documentCoaId: row.documentCoaId }
                    instance({
                        method: "POST",
                        url: "/api/eim/document_coa/open_pdf",
                        data: data
                    }).then(res => {
                        if (res.data.code == 1) {
                            // window.open(
                            //     res.data.data.url)
                            const { url, shortName } = res.data.data
                            this.getBlob(url).then
                            this.getBlob(url).then((blob) => {
                                this.saveAs(blob, shortName)
                            })

                        }
                    })

                }

            },
            childFile(row) {
                // -----------------------------
                window.open(
                    this.baseURL +
                    '/api/eim/document_coa/get_coa_by_pdf?documentCoaId=' +
                    row.documentCoaId + '&' + 'isCoa=' + 'true', 'COA文件')
            },

            openWindow(name) {
                window.open('about:blank', name);
            },

            getBlob(url) {
                return new Promise((resolve) => {
                    const xhr = new XMLHttpRequest()
                    xhr.open('GET', url, true)
                    xhr.responseType = 'blob'
                    xhr.onload = () => {
                        if (xhr.status === 200) {
                            resolve(xhr.response)
                        }
                    }

                    xhr.send()
                })
            },
            // 下载重命名
            saveAs(blob, filename) {
                if (window.navigator.msSaveOrOpenBlob) {
                    navigator.msSaveBlob(blob, filename)
                } else {
                    const link = document.createElement('a')
                    const body = document.querySelector('body')

                    link.href = window.URL.createObjectURL(blob)
                    link.download = filename
                    link.style.display = 'none'
                    body.appendChild(link)
                    link.click()
                    body.removeChild(link)
                    window.URL.revokeObjectURL(link.href)
                }
            },
            a() {
                var ua = navigator.userAgent;
                var isWeixin = !!/MicroMessenger/i.test(ua);
            }

        },

        mounted() {
            this.GetRequest()
            this.a()
            console.log(this, 'e');
        },
    })

</script>


<style>
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .wxtip {
        background: rgba(0, 0, 0, 0.8);
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
    }

    .wxtip-icon {
        width: 52px;
        height: 67px;
        background: url(weixin-tip.png)no-repeat;
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .wxtip-txt {
        margin-top: 107px;
        color: #fff;
        font-size: 16px;
        line-height: 1.5;
    }
</style>


</html>